<template>
  <van-index-bar
    sticky
    highlight-color="#09a4f2"
    z-index="99"
    class="IndexBar"
  >
    <div v-for="item in AllCar" :key="item">
      <van-index-anchor
        class="anchor"
        :index="item.info.pinyin"
        v-if="item.type == 1000"
      />
      <p v-else class="carIcon" @click="carsDetail(item)">
        <van-icon :name="item.info.image_url" size="30" />{{
          item.info.brand_name
        }}
        <van-tag
          color="#7232dd"
          plain
          class="Tag"
          v-if="item.info.dealer_tag == 2"
          >热卖</van-tag
        >
      </p>
    </div>
  </van-index-bar>
</template>

<script>
import { reactive, toRefs, onBeforeMount } from "vue";
import { ObjToArr } from "@/tool/heightDiff";
import { useRouter } from "vue-router";
import { Toast } from "vant";
export default {
  props: {
    AllCar: {
      type: Object,
      default: {},
    },
  },
  name: "indexBar",
  setup(props) {
    const router = useRouter();
    const state = reactive({
      AllCar: props,
    });
    onBeforeMount(() => {
      state.AllCar = ObjToArr(state.AllCar)[0];
      // console.log(state.AllCar);
    });
    const carsDetail = (item) => {
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      item.brand_id = item.brand_id || item.info.brand_id;
      router.push({ path: `/select/${item.brand_id}` });
    };
    return {
      ...toRefs(state),
      carsDetail,
    };
  },
};
</script>

<style lang="less" scoped>
.IndexBar {
  .anchor {
    background: #ddd;
  }
}
.carIcon {
  line-height: 30px;
  text-align: left;
  padding-left: 10px;
  margin: 5px auto;
  display: flex;
  align-content: center;
  .Tag {
    font-size: 12px;
    line-height: 20px !important;
    height: 20px;
    margin: 5px 10px;
  }
}
</style>